<template>
  <div class="common-layout">
    <el-container>
      <el-header>
        <div class="buttons">
          <div>
            <button @click="navigationHistoryBack">
              <!-- <img style="transform: rotate(180deg)" src="../../assets/arr.png" /> -->
              后退
            </button>
          </div>
          <div>
            <button @click="navigationHistoryForward">
              <!-- <img src="../../assets/arr.png" /> -->
              前进
            </button>
          </div>
          <div>
            <a @click="show">
              <img src="../../assets/arr2.png" :style="{
                transform: showHistory ? 'rotate(0deg)' : 'rotate(-180deg)',
              }" />
            </a>
          </div>
          <ul class="history" v-show="showHistory">
            <li v-for="(item, index) in navigationHistoryStack" :key="index">
              <span>{{ item.fileName }}</span>

              <span v-if="getIsCurrentHistoryNavigationItem(item)"> (当前)</span>
            </li>
          </ul>

          <div>
            <button @click="navigationBack">
              <!-- <img style="transform: rotate(-90deg)" src="../../assets/arr.png" /> -->
              上一级
            </button>
          </div>
        </div>
        <div class="crumbs">
          <ul>
            <li v-for="(item, index) in navigationStack" :key="item.id">
              {{ index > 0 ? " /" : "" }}
              <a href="javascript:void(0)" @click="navigationTo(item)">{{
                item.fileName
              }}</a>
            </li>
          </ul>
        </div>
      </el-header>
      <el-main>
        <div class="file-content">
          <table border="1">
            <tr>
              <th></th>
              <th>文件名</th>
              <th>类型</th>
              <th>大小</th>
            </tr>
            <tr v-for="item in listMessage" :key="item.id" class="FileList" @click="open(item)">
              <td>
                <img src="../../assets/文件夹.png" alt="" class="FileName">
              </td>
              <td  class="File">
                {{ item.fileName }}
              </td>
              <td>{{ item.fileType == 1 ? "文件夹" : "文件" }}</td>
              <td>{{ item.fileType == 1 ? "/" : `${item.byteSize}M` }}</td>
            </tr>
          </table>
        </div>
      </el-main>
      <el-footer>
      </el-footer>
    </el-container>
  </div>
  <!-- <div id="app">


  </div> -->
</template>

<script lang='ts'>
import { GetFile } from '../../api/Document'
import Enumerable from "linq";
const FileList: FileDto[] = [
  {
    id: 1,
    parentId: null,
    fileName: "文件1",
    fileType: 2,
    byteSize: 1024,
  },
  {
    id: 2,
    parentId: null,
    fileName: "文件2",
    fileType: 2,
    byteSize: 1024,
  },
  {
    id: 3,
    parentId: null,
    fileName: "文件夹A",
    fileType: 1,
    byteSize: null,
  },
  {
    id: 4,
    parentId: 3,
    fileName: "文件夹B",
    fileType: 1,
    byteSize: null,
  },
  {
    id: 5,
    parentId: 3,
    fileName: "文件夹C",
    fileType: 1,
    byteSize: null,
  },
  {
    id: 6,
    parentId: 3,
    fileName: "文件3",
    fileType: 2,
    byteSize: 1024,
  },
  {
    id: 7,
    parentId: 5,
    fileName: "文件夹D",
    fileType: 1,
    byteSize: null,
  },
];

export class FileDto {
  id: number;
  parentId: number;
  fileName: string;
  fileType: number;
  byteSize: number;
}

export default {
  name: "App",
  // components: {HelloWorld},
  data: () => {
    return {
      showHistory: false,
      listMessage: new Array<FileDto>(),
      checkMessage: {},
      navigationStack: new Array<FileDto>(),
      navigationHistoryStack: new Array<FileDto>(),
    };
  },

  async created() {
    //默认展示根目录
    (this.checkMessage as any).parentId = null;
    this.gotoList();

    var rootFolder = new FileDto();
    rootFolder.fileName = "我的文件";
    this.navigationStack.push(rootFolder);
    this.pushNavigationHistoryStack(rootFolder);
    let result = await GetFile()
    console.log(result)
  },

  methods: {
    open(item: FileDto) {
      if (item.fileType == 1) {
        this.navigationTo(item);
      } else {
        window.alert("打开了文件" + item.fileName);
      }
    },

    gotoList() {
      this.listMessage = Enumerable.from(FileList)
        .where((c) => c.parentId == (this.checkMessage as any).parentId)
        .toArray();
        console.log(this.listMessage);
    },
    show() {
      this.showHistory = !this.showHistory;
    },

    toFolder(folder: FileDto) {
      if ((this.checkMessage as any).parentId == folder.id) {
        return false;
      }

      (this.checkMessage as any).parentId = folder.id;

      this.gotoList();
      return true;
    },

    navigationBack() {
      if (this.navigationStack.length == 1) {
        return;
      }
      this.navigationStack.pop();
      var lastItem = Enumerable.from(this.navigationStack).lastOrDefault();
      if (lastItem == null) {
        return;
      }
      if (this.toFolder(lastItem)) {
        this.navigationHistoryStack.forEach((element) => {
          element["isCurrent"] = false;
        });
        lastItem["isCurrent"] = true;

        this.pushNavigationHistoryStack(lastItem);
      }
    },
    pushNavigationHistoryStack(item: FileDto) {
      var newItem = Object.assign({}, item);

      if (this.navigationHistoryStack.length > 10) {
        this.navigationHistoryStack.pop();
      }
      this.navigationHistoryStack.unshift(newItem);
    },

    dealWithNavigationStack(folder: FileDto) {
      var toIndex = Enumerable.from(this.navigationStack).indexOf(
        (c) => c.id == folder.id
      );
      if (toIndex >= 0) {
        this.navigationStack.splice(
          toIndex + 1,
          this.navigationStack.length - toIndex - 1
        );
      } else {
        this.navigationStack.push(folder);
      }
    },
    /**打开文件夹 */
    navigationTo(folder: FileDto) {
      this.dealWithNavigationStack(folder);
      if (this.toFolder(folder)) {
        this.navigationHistoryStack.forEach((element) => {
          element["isCurrent"] = false;
          console.log(element);
        });
        folder["isCurrent"] = true;
        this.pushNavigationHistoryStack(folder);
      }
    },
    /**后退 */
    navigationHistoryBack() {
      var currentIndex = Enumerable.from(this.navigationHistoryStack).indexOf(
        (c) => c["isCurrent"]
      );
      if (currentIndex < this.navigationHistoryStack.length - 1) {
        var forwardIndex = currentIndex + 1;

        var folder = this.navigationHistoryStack[forwardIndex];
        this.dealWithNavigationStack(folder);

        if (this.toFolder(folder)) {
          this.navigationHistoryStack.forEach((element) => {
            element["isCurrent"] = false;
          });
          this.navigationHistoryStack[forwardIndex]["isCurrent"] = true;
        }
      }
    },
    /**
     * 前进
     */
    navigationHistoryForward() {
      var currentIndex = Enumerable.from(this.navigationHistoryStack).indexOf(
        (c) => c["isCurrent"]
      );
      if (currentIndex > 0) {
        var forwardIndex = currentIndex - 1;

        var folder = this.navigationHistoryStack[forwardIndex];
        this.dealWithNavigationStack(folder);

        if (this.toFolder(folder)) {
          this.navigationHistoryStack.forEach((element) => {
            element["isCurrent"] = false;
          });
          this.navigationHistoryStack[forwardIndex]["isCurrent"] = true;
        }
      }
    },
    /**当前路径 */
    getIsCurrentHistoryNavigationItem(item) {
      var result = item["isCurrent"];
      return result;
    },
  },
};
</script>

<style scoped lang="less">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: left;
  color: #2c3e50;
  margin-top: 60px;
}

.buttons {
  display: inline-block;
}

.buttons img {
  width: 10px;
}

.buttons div {
  display: inline-block;
}

.history {
  position: absolute;
  display: block;
  background: #ffffffd4;
  box-shadow: 0px 8px 16px 0px rgb(0 0 0 / 20%);
  min-height: 120px;
  padding-right: 20px;
}

.crumbs {
  display: inline-block;
}

.crumbs ul li {
  display: inline-block;
}

.file-content table {
  width: 100%;
}

table {
  border: 0px;
  border-spacing: 0px;
  text-align: center;
}

.File {
  cursor: pointer;
}

tr {
  height: 50px;
  border: 0px;
  >th{
    border: 0px;
  }
  >td{
    border: 0px;
  }
}

.FileList:hover {
  background-color: #6a89ef;
}
.common-layout {
    display: block;
    position: relative;
    height: 673.6px;
    background: white;
    // overflow: auto;

    >.el-container {
        display: block;
        position: relative;
        height: 100%;
        background: white;
        // overflow: hidden;
        >footer,
        >main,
        >header {
            // height: 48px;
            padding: 8px 12px;
            height: 100%;
        }
        >footer,
        >header {
            text-align: right;
            background-color: white;
            // border-bottom: 1px solid rgb(181, 178, 178);
        }
        >header {
            border-bottom: solid 2px #ddd;
            height: 64px;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            .el-input {
                width: 150px;
                height: 80%;
                // margin-right: 18px;
            }
            >.el-button {
                height: 80%;
            }
        }
        >footer {
            border-top: solid 1px #ddd;
            height: 48px;
            >.el-pagination {
                float: right;
            }
            >.demo-pagination-block {
                height: 100%;
                line-height: 100%;

                >.el-pagination {
                    display: flex;
                    flex-direction: row;
                    justify-content: end;
                    padding-right: 15px;
                }
            }
        }
        >main {
            height: calc(100% - 48px - 64px);

            // overflow: hidden;
            // overflow-x: hidden;
            // overflow-y: hidden;
            &.no-footer {
                height: calc(100% - 64px);
            }
            >.el-table {
                height: calc(100%-16px);
            }
        }
    }
}

a {
    text-decoration: none;
}
.FileName{
  width: 50px;
  height: 50px;
}
</style>
